<template>
  <div class="commission_list-container">
    <breadcrumb style="position: absolute;width:100%;"></breadcrumb>
    <div class="content">
      <div class="query">
        <div class="margin_right_20">
          用户名称:&nbsp;
          <el-input
            v-model="username"
            @keyup.enter.native="get_commission_list(1)"
            placeholder="请输入内容"
            style="width:100px;height:30px;"
          ></el-input>
        </div>
        <div class="margin_right_20">
          用户ID:&nbsp;
          <el-input
            v-model="userId"
            @keyup.enter.native="get_commission_list(1)"
            placeholder="请输入内容"
            style="width:100px;height:30px;"
          ></el-input>
        </div>
        <div class="margin_right_20">
          账号状态:&nbsp;
          <el-select
            v-model="status1"
            @keyup.enter.native="get_commission_list(1)"
            placeholder="请选择"
          >
            <el-option label="全部" value></el-option>
            <el-option label="冻结" value="0"></el-option>
            <el-option label="正常" value="1"></el-option>
          </el-select>
        </div>
        <div class="btn">
          <el-button type="primary" icon="el-icon-search" @click="get_commission_list(1)">查询</el-button>
        </div>
      </div>
      <div class="table">
        <el-table :data="commissionList" style="width: 100%" height="598">
          <el-table-column prop="userName" label="用户昵称"></el-table-column>
          <el-table-column prop="userNo" label="用户ID"></el-table-column>
          <el-table-column prop="commissionSun" label="累计佣金">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="handledetail(scope.row.userId)"
              >{{scope.row.commissionSun}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="extractCommission" label="已提现佣金">
            <template slot-scope="scope">
              <el-button
                type="text "
                @click="handledetail1(scope.row.userId)"
              >{{scope.row.extractCommission}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="commission" label="待提现佣金"></el-table-column>
          <el-table-column label="该账号提现功能" prop="auditCommission">
            <template slot-scope="scope">
              <el-select
                @change="handlede(scope.row.userId,scope.row.auditCommission)"
                v-model="scope.row.auditCommission"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in zhuangts"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <!-- <el-table-column label="该账号提现功能">
            <template slot-scope="scope">
              <el-button type="text" size='small' @click="dialogVisible1=true, handlede(scope.row.userId)" v-if="scope.row.status==1?yxs=false:yxs=true">启用</el-button>
               <el-button type="text" size='small' @click="dialogVisible=true, handlede(scope.row.userId)" v-else>禁用</el-button> 
              <el-button type="text" size="small" @click="handledetail(scope.row.userId)">详情</el-button>
            </template>
          </el-table-column>-->
        </el-table>
        <pagination
          :currentPage="currentPage"
          :page="page"
          :total="total"
          :pageSize="pageSize"
          @change-current="currentChange"
          @change-size="sizeChange"
        ></pagination>
      </div>
      <el-dialog title="解除禁用" :visible.sync="dialogVisible" width="30%">
        <span>
          <span style="color:red;font-size:2rem;" class="el-icon-warning"></span>此操作将切换该用户提现功能（正常/冻结），是否继续？
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible=false" style="width:70px;">取 消</el-button>
          <el-button type="primary" @click="getProhibit" style="width:70px;">确 定</el-button>
        </span>
      </el-dialog>
      <!-- <el-dialog
      title="禁用"
      :visible.sync="dialogVisible1"
      width="30%" >
     <span>冻结后,用户将不可再购物时使用购物券，是否要继续</span>
     <span slot="footer" class="dialog-footer">
     <el-button @click="dialogVisible1 = false" style="width:70px;">取 消</el-button>
     <el-button type="primary" @click="getProhibit1" style="width:70px;">确 定</el-button>
      </span>
      </el-dialog>-->
    </div>
  </div>
</template>

<script>
import breadcrumb from "../../components/breadcrumb";
import pagination from "../../components/page";
import { commission_list, commissionzz } from "../../api/getData";
export default {
  components: { breadcrumb, pagination },
  data() {
    return {
      yxs: true, //控制状态按钮
      userId: "", //用户的Id
      status1: "", //用户状态
      status2: "",
      status3: [{ value: 0, label: "冻结" }, { value: 1, label: "正常" }],
      page: 1,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      username: "",
      commissionList: [],
      commissionLists: [],
      dialogVisible: false, //修改状态的显示和隐藏
      dialogVisible1: false, //禁用对话框哦
      id: "", //单条数据的id?
      zhuangts: [{ value: 0, label: "冻结" }, { value: 1, label: "正常" }],
      shuju: "",
      shuju1: ""
    };
  },
  created() {
    if (localStorage.getItem("pageMsg")) {
      var pageMsg = JSON.parse(localStorage.getItem("pageMsg")) || "";
      localStorage.removeItem("pageMsg");
      this.username = pageMsg.username;
      this.currentPage = pageMsg.currentPage;
      this.pageSize = pageMsg.pageSize;
    }
    this.get_commission_list();
  },
  methods: {
    sizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.get_commission_list();
    },
    currentChange(val) {
      this.currentPage = val;
      this.get_commission_list();
    },
    handledetail(id) {
      localStorage.setItem("path", JSON.stringify(this.$route.path));
      localStorage.setItem(
        "pageMsg",
        JSON.stringify({
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          username: this.username
        })
      );
      this.$router.push("/commissionyongj?id=" + id);
    },
    handledetail1(id) {
      localStorage.setItem("path", JSON.stringify(this.$route.path));
      localStorage.setItem(
        "pageMsg",
        JSON.stringify({
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          username: this.username
        })
      );
      this.$router.push("/commissionDetails?id=" + id);
    },
    get_commission_list(currentPage) {
      if (currentPage) {
        this.currentPage = currentPage;
      }
      let data = "size=" + this.pageSize + "&current=" + this.currentPage;
      let data1 =
        "userName=" +
        this.username +
        "&userNo=" +
        this.userId +
        "&status=" +
        this.status1;
      this.$axios
        .post("/web_account/commission_list?" + data1, data)
        .then(res => {
          //console.log(res)
          this.total = res.data.data.total;
          this.page = Math.ceil(this.total / this.pageSize);
          this.commissionList = res.data.data.records;
        });
    },
    //修改用户状态
    getProhibit() {
      this.dialogVisible = false;
      let data =
        "userId=" + this.shuju + "&commissionAuditStatus=" + this.shuju1;
      commissionzz(data).then(res => {
        this.get_commission_list();
        return this.$message({
          type: "success",
          message: "修改成功"
        });
      });
    },
    handlede(id, auditCommission) {
      this.shuju = id;
      this.shuju1 = auditCommission;
      this.dialogVisible = true;
      this.get_commission_list();
    }
  }
};
</script>


<style lang="less" >
.commission_list-container {
  @import "../../style/table.less";
  @import "../../style/content.less";
  display: flex;
  flex-flow: column;
  position: relative;
  height: 100%;
  .el-table .cell {
    white-space: pre-line !important;
  }
  .content {
    .query {
      .btn {
        .el-button {
          width: 70px;
        }
      }
    }
  }
}
</style>
